<template>
  <!--选择关卡弹窗-->
  <Popup ref="SelectLevelPopup" title="选择关卡" @confirm="confirm">
    <view class="SelectLevelPopup">
      <view class="input-con flex">
        <input placeholder="请输入关卡名称" v-model="levelName" id="nameInput" class="f_1" @confirm="addLevelName"></input>
        <u-icon v-if="levelName" size="24" name="checkmark-circle-fill" color="#37B874" class="fs_0"
          @click="addLevelName"></u-icon>
      </view>
      <view class="option-item flex flex-column">
        <view class="label flex item-center">
          <text class="required">*</text>
          <text>关卡名称</text>
        </view>
        <view class="list">
          <u-radio-group v-model="checkVal" placement="column">
            <view v-for="(name, index) in list" :key="index" class="level-info flex item-center">
              <u-radio :name="name" shape="circle" class="fs_0" activeColor="#37B874" size="24" />
              <view class="f_1 flex level-name item-center">
                <text class="fs_0">{{ index + 1 }}</text>
                <label class="f_1 line-1">{{ name }}</label>
              </view>
              <u-icon name="minus-circle" class="fs_0" color="#f56c6c" size="28" @click="remove(index)"></u-icon>
            </view>
          </u-radio-group>
        </view>

      </view>
    </view>
  </Popup>
</template>
<script>
import Popup from "@/improve/components/common/Popup.vue";
import { notificationFun } from "@/utils/PrjUtils";

export default {
  name: "SelectLevelPopup",
  components: { Popup },
  props: {
    levelNameList: Array
  },
  data() {
    return {
      levelName: null,
      list: [],
      checkVal: null,
    }
  },
  created() {
    this.list = this.levelNameList
  },
  methods: {
    addLevelName() {
      if (!this.levelName) {
        return;
      }
      if (this.list.includes(this.levelName)) {
        notificationFun("请勿重复添加")
        return
      }
      this.list.push(this.levelName)
      this.levelName = null

    },
    remove(index) {
      this.checkVal = null;
      this.list.splice(index, 1);
    },
    open(val) {
      this.checkVal = val;
      this.$refs.SelectLevelPopup.open();
    },
    confirm() {
      if (!this.checkVal) {
        notificationFun("请选择关卡名称")
        return;
      }
      this.$emit("confirm", this.checkVal)
      this.$refs.SelectLevelPopup.close();
    }
  }
}
</script>
<style scoped lang="scss">
.SelectLevelPopup {
  padding: 0 20px;

  .input-con {
    background-color: #F9F9F9;
    border-radius: 10px;
    height: 40px;
    color: #333333;
    font-size: 16px;
    padding: 0 10px;
    margin-top: 20px;

    input {
      border: none;
      height: 100%;
      margin-right: 10px;
    }
  }

  .option-item {
    margin: 23px 0 7px 0;

    .label {
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .required {
      color: #f56c6c;
      line-height: 20px;
      font-size: 20px;
      margin-right: 4px;
      margin-top: 6px;
    }

    .level-info {

      margin-top: 15px;

      .level-name {
        margin: 0 12px;
        color: #333333;
        font-size: 16px;

        label {
          margin-left: 16px;
          background-color: #F9F9F9;
          border-radius: 10px;
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
        }
      }
    }
  }
}
</style>